<!--自定义事件（待学习）-->

<html>

<head>
  <meta charset="utf-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
	<div id="counter-event-example">
		<p>{{ total }}</p>
		<button-counter v-on:increment="incrementTotal"></button-counter>
		<button-counter v-on:increment="incrementTotal"></button-counter>
	</div>

	<div id="example-1">
		<button v-on:click="counter += 1">增加 1</button>
		<p>这个按钮被点击了 {{ counter }} 次。</p>
	</div>
</body>
<script>
       Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
});
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
});


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>


</html>